<template>
	<theme-box title="筛选群发">
		
			<div class="panel-body">

				<form class="form-inline" @submit.prevent>
					<div class="form-group">
						<label>组别：</label>
						<select class="form-control" v-el:group @change="doSelect">
							<option value="{{group.id.id}}" v-for="group in subGroup">{{group.name}}</option>
						</select>										
					</div>		 
				</form>			
				<div class="divide-20"></div>			
				<div class="row alert alert-default">
					<div class="col-sm-5 text-center">所有关注用户</div>
					<div class="col-sm-2 text-center">操作</div>
					<div class="col-sm-5 text-center">选择关注用户</div>							
				</div>					
				<div class="row">
					<div class="col-sm-5" v-el:userlist>
						<table class="table dataTable table-bordered">
							<tr v-for="item in userList" :class="{'selected':item.selected}"  @click="selectLeft(item, $event)">
								<td>
										{{item.name}}
								</td>							
							</tr>
						</table>						
					</div>
					<style>
						.control-button-group .btn {
							width:60px;
						}
						.dataTable tr {
							cursor:pointer;
						}
						.dataTable tr.selected {
					    background-color: #B0BED9;						
						}
						.box-container {
							width:200px;
							margin: 10px auto;
						}							
					</style>			
					<div class="col-sm-2 text-center control-button-group">					
						<div class="form-group">
							<v-button theme="primary" @click="selectItem">&gt;</v-button>										
						</div>						
						<div class="form-group">
							<v-button theme="primary" @click="selectAll">&gt;&gt;</v-button>										
						</div>
						<div class="form-group">
							<v-button theme="primary" @click="deselectItem">&lt;</v-button>	
						</div>									
						<div class="form-group">
							<v-button theme="primary" @click="deselectAll">&lt;&lt;</v-button>	
						</div>													
					</div>
					<div class="col-sm-5" v-el:selectlist style="max-height:384px;overflow-y:auto">
						<table class="table dataTable table-bordered">
							<tr v-for="item in selectList" :class="{'selected':item.selected}" @click="selectRight(item, $event)" track-by="$index">
								<td>
											{{item.name}}
								</td>							
							</tr>
						</table>
					</div>
				</div>
				<div>					
					<app-page v-ref:page></app-page>
				</div>
			</div>
			<div class="panel-footer">					    
				<app-box v-ref:box></app-box>
				<div class="wizard-buttons" style="background:#fff">
					<div class="row">
						<div class="col-sm-11">
							<div class="text-center">
								<v-button theme="primary" @click="sendAll" class="col-sm-offset-1 pull-left">确认群发</v-button>									
							</div>
						</div>
					</div>
				</div>
			</div>		
	</theme-box>
</template>
<script>	
import Box from 'pages/partial/box.vue';
import Page from 'pages/partial/page.vue';

export default {
		data: () => ({
//			userList: [],
//			selectList: [],
			userCollection: [],
			selectCollection: [],
			subGroup: []
		}),	
		props: {
			userList: {
				type: Array,
				default: function() {
					return []
				}
			},
			selectList: {
				type: Array,
				default: function() {
					return []
				}
			},
								
				
		},
		components: {
			'app-box': Box,
			'app-page': Page				
		},			
		events: {
			'pagination': 'search'
		},	
		methods: {
			getSubGroup() {
				let self = this;
				self.$search({
					url: '/api/v1' + projectName_Url + '/wechat/subGroup/query.html'
				}).then(response => {	
					let data = response.content.groupList;
					self.$set("subGroup",data);
					if(data.length>0) {
						let groupId = data[0].id.id;
						this.getUser(groupId);							
					}				
				}, error => {});				
			},			
			selectAll() {							
				//let arr = (this.selectList).concat(this.userList);
				let arr = _.unionWith(this.selectList,this.userList,_.isEqual).map(player=>{
					player.selected = false;
					let result = _.cloneDeep(player);
					return result
				})
				this.$set("selectList",arr);
			},
			deselectAll() {	
				this.$set("selectList",[]);
				this.$set("selectCollection",[])
			},
			selectItem() {
				let self = this;
				this.userCollection.forEach(item=>{	
						let has = false;		
						item.selected = false;
						this.selectList.forEach(function(obj){						
							 if(obj.openid == item.openid) {
								 has = true;
							 }													  
						})
						if(!has) {
							let obj = _.cloneDeep(item);
							this.selectList.push(obj);	
						}
				})		
				this.$set("userCollection",[]);
			},
			deselectItem() {
				this.selectCollection.forEach(item=>{
					item.selected = false;
					this.selectList.$remove(item);
				})
				this.$set("selectCollection",[])
			},
			selectLeft(item,e) {
				//let tr = $(e.target).closest('tr');
				if(item.selected){
					this.userCollection.$remove(item);
					//tr.removeClass("selected");	
					item.selected = false;
				} else {
					this.userCollection.push(item);
					//tr.addClass("selected");
					item.selected = true;
				}
			},
			selectRight(item,e) {
				//let tr = $(e.target).closest('tr');				
				if(item.selected){
					this.selectCollection.$remove(item);
					//tr.removeClass("selected");	
					item.selected = false;
				} else {
					this.selectCollection.push(item);
					//tr.addClass("selected");
					item.selected = true;
				}
			},
			doSelect() {
				  let groupId = this.$els.group.value;
				  let start = 1;
					this.getUser(groupId,start);	
			},
			search() {
				  let groupId = this.$els.group.value;
					this.getUser(groupId);				
			},
			getUser(groupId,start) {
				  let self = this;
				  let data = {
						groupId: groupId
					}
					if(start==1) {
						data.aoData = this.$refs.page.setData(10,1);	
					} else {
 						data.aoData = this.$refs.page.setData(10);							
					}
				 				
					self.$search({
						url: '/api/v1' + projectName_Url + '/wechat/usr/query.html',
						data
					}).then(function (response) {	
							let total = response.content.total;
							self.$refs.page.init(total);						
							let data = response.content.usrList;
							let nameArr = data.map(json =>{
								let data = {
									name: json.nickname,
									openid: json.openid,
									selected: false
								}
								return data
							});
							self.$set("userList",nameArr);
					}, function (response) {

					});				
			},
			sendAll() {
				let self = this;
				let jsonArr = this.selectList;
				let arr = jsonArr.map(json => {
					return json.openid;
				})
				if(!arr.length>0) {
					let message = {
						title:"温馨提示",
						content:"请先选择用户"
					}
					Midway.alert(message);
					return false;
				}
				if(arr.length==1) {
					let message = {
						title:"温馨提示",
						content:"最少选择两位用户"
					}
					Midway.alert(message);
					return false;
				}				
				arr = arr.join(",");			
				if(this.$refs.box.valid()){
					let data = this.$refs.box.get();	
					data.toUsr = arr;					
					data.mchtId = localStorage.getItem('get_id');	
					self.$post({
						url: '/api/v1' + projectName_Url + '/wechat/mass/sendUsr.html',	
						data
					}).then(response => {	
						let message = {
							title:"操作提示",
							content:"群发成功"
						}
						Midway.alert(messsage);
					}, error => {});						
					
				}
				//console.log(arr);
			}
		},
		ready() {
				this.getSubGroup();
			
		}
}
</script>